import styles from "@/styles/NodeBox.module.sass";
import React, { ReactNode } from "react";
import hash from "object-hash";
import { Range } from "@/types/VisBaseNode";

const NodeBox: React.FC<{
  displayName: string | ReactNode;
  color: string;
  titleTextColor?: string;
  icon?: ReactNode;
  maxChildrenHeight?: string;
  range?: Range;
}> = (props) => {
  const {
    displayName,
    color,
    icon,
    maxChildrenHeight,
    titleTextColor = "white",
  } = props;
  return (
    <div className={styles.outerBox} style={{ backgroundColor: color }}>
      <div
        className={`${styles.titleBox} ${props.range ? hash(props.range) : ""}`}
        style={{ color: titleTextColor }}
      >
        <div className={styles.iconBox}>{icon}</div>
        {displayName}
      </div>
      <div
        className={styles.childrenBox}
        style={{ maxHeight: maxChildrenHeight }}
      >
        {props.children}
      </div>
    </div>
  );
};

export default NodeBox;
